<template>
<div>
 <div class="recommend">
 <p class="re-title border-bottom"><span class="iconfont dianzan">&#xe61c;</span>去哪儿推荐</p>   
<div class="re-content border-bottom" v-for="(item,index) in hotlist" :key="index">
  <div class="re-item">
      <div class="item-left">
          <h6>{{item.title}}</h6>
          <p><img src="https://img1.qunarzz.com/piao/fusion/1804/f0/39deb48037c83702.png" alt="">
              16:00前可订今日</p>
           <p>
               <span class="ticket-label "><img src="https://img1.qunarzz.com/piao/fusion/1804/b0/c3cf2897c74ecc02.png" alt="">自营</span>
               <span class="ticket-label ">随时退</span>
            </p>   
      </div>
      <div class="item-right">
        <a class="item-right-a" href="">
            <p class="item-num">￥<span class="item-num-spec">{{item.money}}</span></p>
            <div class="item-btn">预订</div>
        </a>
      </div>
  </div>
</div>

</div>
  

 
 <!-- 递归循环创建票种 -->
 
</div>
 
</template>

<script>
    export default {
        name:"DetailRecommend",
        props:{
          hotlist:Array
        }
    }
</script>

<style lang="stylus" scoped>
.recommend
   overflow hidden
   
   
   background #fff
   padding-top .2rem
   padding-left .2rem
 .re-title
    font-size .33rem
    padding-bottom .25rem
   .dianzan
     font-size .36rem
     color red
     margin-right .3rem
 .re-content
    overflow hidden
    width 100%
    height 0
    padding-bottom 2rem
    padding-top .2rem
   .item-right
     width 1.8rem
     float left 
     padding .6rem .1rem
     .item-right-a
       position relative
       left 0
       top 0
       width 100%
       height 100% 
      .item-num
          padding-left .15rem 
          font-size: .3rem;
          color: #ff8300;
          line-height: .34rem;
        .item-num-spec
           font-size: .5rem;  
      .item-btn
        background #ff8c12
        color #ffffff
        width 1.6rem
        height .6rem
        line-height .6rem
        border-radius .08rem
        text-align center     
   .item-left
     width 5rem
     float left
    
   .item-left h6
     line-height .4rem 
     color #616161
     font-size .3rem 
   .item-left img
     width .24rem
     max-height .32rem  
   .item-left p
     margin-top .1rem
     line-height .4rem 
     font-size .1rem 
    .ticket-label
        display: inline-block;
        padding: 0 .04rem;
        color: #00afc7;
        font-size: .2rem;
        white-space: nowrap;
        margin-right .1rem
        border 1px solid #a5e4ec;   
       
</style>